import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import {
  AtCalendar,
  AtInput,
  AtSwitch,
  AtButton,
} from "taro-ui";
import { connect } from "@tarojs/redux";
import dayjs from "dayjs";

import {
  onSubmitPlan,
  onSubmitPlanSuccess
} from "../../actions/makePlan";
import { onCheckTodayPlan ,onCheckPlan} from "../../actions/checkPlan";

@connect(
  state => state,
  {
    onSubmitPlan,
    onSubmitPlanSuccess,
    onCheckTodayPlan,
    onCheckPlan
  }
)
class ReusePlan extends Component {
  constructor() {
    super(...arguments);
    const today = new Date(),
      todayFormat = `${today.getFullYear()}-${today.getMonth() +
        1}-${today.getDate()}`,
      calSelectedDays = {
        value: {
          start: todayFormat,
          end: todayFormat
        }
      };
    this.state = {
      defaultSelectedDays: new Date(),
      selectedDays: calSelectedDays,
      planMoreDay: false,
      setSelectedDays: false,
      planName: ""
    };
  }

  onInputPlanName = v => {
    this.setState({
      planName: v
    });
  };

  onSelectDays = value => {
    this.setState({
      selectedDays: value,
      setSelectedDays: value.value.end ? true : false
    });
  };

  changePlanMoreDay = v => {
    this.setState(prevState => ({
      planMoreDay: v,
      selectedDays: v ? null : prevState.defaultSelectedDays,
      setSelectedDays: false
    }));
  };

  clickToResetDays() {
    this.state.setSelectedDays
      ? this.setState({ setSelectedDays: false })
      : null;
  }

  onResetPlan = () => {
    this.setState({
      setSelectedDays: false,
      planName: ""
    });
  };

  onSubmitPlan = () => {
      !this.state.setSelectedDays
      ? Taro.atMessage({
          message: "请选择计划生效日期",
          type: "error",
          duration:3000
        })
      : this.props.onSubmitPlan({
          user: this.props.user.openid,
          day: dayjs(new Date()).format("YYYY年MM月DD日 HH:mm"),
          planName: this.state.planName !== "" ? this.state.planName : "匿名",
          selectedDays: this.state.selectedDays,
          missions:this.props.planToReuse.missions
        });
  };

  freshPlan() {
    let today = new Date(),
      data = {
        user: this.props.user.openid,
        days: [
          dayjs(
            `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
          ).format("YYYY-MM-DD")
        ]
      };
    this.props.onCheckTodayPlan(data,()=>{
      this.props.onCheckPlan({
        user:this.props.user.openid,
        days:[]
      })
    });
  }

  componentDidUpdate(prevProps){
    
    this.props.makePlan.submitedPlan
      ? (
        this.onResetPlan(),
        Taro.atMessage({
          message: prevProps.user.specialWords.length===0?"制定计划成功":this.props.user.specialWords[4],
          info: "info",
          duration:3000
        }),
        prevProps.onSubmitPlanSuccess(),
        this.freshPlan())
      : null;
  }
  render() {
    return (
      
      <View>
        <AtInput
          title='复用计划名称'
          type='text'
          placeholder='默认为匿名'
          value={this.state.planName}
          onChange={this.onInputPlanName}
        />
        <AtSwitch
          title='复用多天'
          checked={this.state.planMoreDay}
          onChange={this.changePlanMoreDay}
        />
        <AtButton className={{'wrap-button':this.state.planMoreDay}} type='secondary' full onClick={this.clickToResetDays}>
          {!this.state.setSelectedDays
            ? "请选择时间："
            : this.state.planMoreDay
            ? `已选择：${this.state.selectedDays.value.start}~${
                this.state.selectedDays.value.end
              } 点此重新选择`
            : `已选择：${this.state.selectedDays.value.start}，点此重新选择`}
        </AtButton>
        {this.state.setSelectedDays ? null : (
          <AtCalendar
            isSwiper
            isMultiSelect={this.state.planMoreDay}
            onSelectDate={this.onSelectDays}
          />
        )}

        <AtButton
          full
          type='primary'
          className='submit-plan'
          onClick={() => {
            this.onSubmitPlan(this.state);
          }}
        >
          确定复用计划
        </AtButton>
      </View>
    );
  }
}

export default ReusePlan;
